<template>
  <el-row class="chooseType">
    <el-col :span="24" class="typeRow">
      <el-col :span="2">*选择类型</el-col>
      <el-col :span="22" style="text-align: left" class="typeSelBox" >
        <el-button v-for="(item,index) in activeType"
                   :key="item.value"
                   :value="item.name" @click="setType(item.name,item.relatedSectionsArray)" ref="nav" v-bind:class="{ active: typeName==item.name?true:false }">{{item.value}}
        </el-button>
      </el-col>
    </el-col>
    <el-button @click="nextStep" class="buttonStep">下一步</el-button>
  </el-row>
</template>
<script>
  export default{
    data () {
      return {
        activeType: [],
        actType: '',
        typeName:'',
      }
    },
    computed:{
      isActive(){
          return true;
      }
    },
    methods: {
      setType (activityType,relatedSectionsArray) {
        this.typeName=activityType;
//    展示模块的数量
          let modulesCount=relatedSectionsArray.length;
//    活动类型
        this.actType = activityType;
        this.$store.dispatch("selActivityType",{activityType,modulesCount});
      },
      nextStep () {
        if (this.actType === '') {
          this.$alert('请选择类型');
        } else {
          this.$emit('getType',{activityType:this.actType,step:2,showModules:'basic'});
        }
      }
    },
    created () {
      this.$http.get('/api-active/v1/api/OptionDetails/activity/type')
        .then((response) => {
          let data = response.body;
          this.activeType = data.result;
      })
    }
  }
</script>
<style lang="less">
@greenStyle:#63c5ce;
@orangeStyle:#f7931e;
  .chooseType{
     //公用按钮 上下步
    .buttonStep{
      width: 200px;
      border:0;
      background: @greenStyle;
      margin:30px 40px 0 40px;
      color:#fff;
    }
    .el-row {
      margin-top: 30px;
      display: block;
    }
    .active{
      background: #f7931e;
      color:#fff;
      border:0;
    }
    .typeSelBox .el-button{
      margin-left:20px;
      width:110px;
      font-size:12px;
      &:focus{
        color: #fff;
        background: @orangeStyle;
        border:0;
      }
      &:hover{
        color: #fff;
        background: @orangeStyle;
        border:0;
      }
    }
    .buttonStep{
      margin-top:200px;
      float: left;
    }
  }
</style>
